<template>
  <div class="productView_container">
    <header>
      <p>收入完成</p>
    </header>
    <main>
      <el-form :inline="true" :model="formInline" class="main_searchBar">
        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="formInline.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="账期:">
          <el-date-picker size="mini" v-model="formInline.accountPeriod" value-format="yyyyMM" type="month" placeholder="选择月" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>

      <!-- <el-table size="mini" :header-cell-style="{background:'#eef1f6'}" :data="tableData" border style="width: 100%" v-loading="showTableLoading">
        <el-table-column prop="areaName" label="本地网" width="160"></el-table-column>
        <el-table-column align="center" v-for="(item, index) in titleList" :key="index" :label="item">
          <el-table-column align="center" label="主营预算" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.thisYearBudget || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.thisYearBudgetjb || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.thisYearBudgetdm || 0}}</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.thisYearBudgetdi || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="累计完成" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.thisYearBudgetLj || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.thisYearBudgetLjjb || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.thisYearBudgetLjdm || 0}}</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.thisYearBudgetLjdi || 0}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="增长率" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.tbYearInrease || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.tbYearInreasejb || 0 }}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.tb_year_inreasedm || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.tb_year_inreasedi || 0 }}%</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="完成率" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.completeYearBudget || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.completeYearBudgetjb || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.completeYearBudgetdm || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.completeYearBudgetdi || 0}}%</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>-->
    </main>
  </div>
</template>

<script>
import { $budgetAPI, $budget } from "@/api";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";

export default {
  data() {
    return {
      formInline: {
        areaId: "",
        accountPeriod: "",
      },
      tableData: [],

      showTableLoading: false,
      areaIds: [],
      areaNames: [],
      areaList: [],
      pickerOptions: this.pickerDisabled(),
      disabledTime: "",
    };
  },
  mounted() {},
  methods: {
    handle_search() {
      this.showTableLoading = true;
      $budgetAPI.revenueCompletion(
        this.formInline,
        (res) => {
          if (res.code == 0) {
            this.tableData = res.content.data;
            this.areaIds = res.content.areaIds.split(",");
            this.areaNames = res.content.areaNames.split("->");
            this.areaList = [];
            this.areaIds.map((it, i) => {
              var o = {
                label: this.areaNames[i],
                value: this.areaIds[i],
              };
              this.areaList.push(o);
            });
          }
          this.showTableLoading = false;
        },
        (err) => {
          this.showTableLoading = false;
        }
      );
    },
    handle_export() {},
    handleSelect(key) {
      this.activeIndex = "" + key;
    },
    getMonth() {
      $budgetAPI.incomeKeepRegionalMonth(
        { maximum: 10 },
        (res) => {
          if (res.code == 0) {
            this.formInline.accountPeriod = res.content;
            this.disabledTime = res.content;
            this.handle_search();
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    pickerDisabled() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.disabledTime) {
            var timeyear = time.getFullYear();
            var timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = "0" + timemonth;
            }
            var currentdate = timeyear.toString() + timemonth.toString();
            if (currentdate > self.disabledTime) {
              return true;
            }
          }
        },
      };
    },
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.formInline.areaId = this.accountInfo.areaId;
    // this.formInline.areaName = this.accountInfo.areaName;
    this.getMonth();
  },
};
</script>

<style lang="scss" scoped>
.productView_container {
  width: 100%;
  height: 100%;
  & > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    height: 40px;
    margin: 0 -20px;
    padding: 0 20px;
    & > p {
      font-weight: bold;
      font-size: 15px;
    }
  }
  & > main {
    padding: 0 10px 10px;
    .main_searchBar {
      border-bottom: 1px solid #d6d9e5;
      /deep/ .el-form-item {
        margin: 6px 10px 6px 0;
      }
      button {
        color: #fff;
        border: none;
        outline: none;
        &:hover {
          opacity: 0.8;
        }
      }
      #search_btn {
        background-color: #2a90de;
      }
      #export_btn {
        background-color: #2cd531;
      }
    }
  }
}
</style>
